<template>
	<view class="">
		<view class="container">
			<view class="m-title">收货信息</view>
			<view class="main">
				<view class="p">
					<text>收件人</text>
					{{ receive.fullname }}
				</view>
				<view class="p">
					<text>联系电话</text>
					{{ receive.mobilePhone }}
				</view>
				<view class="p">
					<text>收件地址</text>
					{{ receive.address }}
				</view>
			</view>
			<view class="m-title">商品信息</view>
			<view class="list-goods">
				<view class="item u-flex u-col-top u-row-between" v-for="(item, index) in list" :key="index">
					<view class="img">
						<image :src="http + item.image" mode="aspectFill"></image>
					</view>
					<view class="con">
						<view class="title u-line-1">
							{{ item.title }}
						</view>
						<view class="tips mt20">
							<text v-for="(item3, index3) in item.sell_spec.split(',')">{{ item3 }}</text>
							<text v-for="(item4, index4) in item2.mountings_texts" :key="index4">{{ item4.title }}-{{ item4.intro }}</text>
						</view>
					</view>
					<view class="r">
						<view class="price">{{ item.sell_price }}元</view>
						<view class="num">×{{ item.num }}</view>
					</view>
				</view>
			</view>
			<view class="m-title">订单信息</view>
			<view class="list-order" v-if="data && data.order_no">
				<view class="item u-flex u-col-center u-row-between">
					<view class="l">订单编号</view>
					<view class="r">
						{{ data.order_no }}
					</view>
				</view>

				<view class="item u-flex u-col-center u-row-between">
					<view class="l">订单状态</view>
					<view class="r">
						{{ ss2[data.status] }}
					</view>
				</view>
				<view class="item u-flex u-col-center u-row-between">
					<view class="l">商品金额</view>
					<view class="r">{{ data.order_price }}元</view>
				</view>
				<view class="item u-flex u-col-center u-row-between">
					<view class="l">邮费</view>
					<view class="r">{{ data.express_price }}元</view>
				</view>
				<view class="item u-flex u-col-center u-row-between">
					<view class="l">订单金额</view>
					<view class="r">{{ data.pay_price }}元</view>
				</view>
				<view class="item u-flex u-col-center u-row-between">
					<view class="l">实付金额</view>
					<view class="r">{{ data.pay_price }}元</view>
				</view>
				<view class="item u-flex u-col-center u-row-between">
					<view class="l">下单时间</view>
					<view class="r">
						{{ data.createtime }}
					</view>
				</view>
				<view class="item u-flex u-col-top u-row-between">
					<view class="l">备注信息</view>
					<view class="r">
						{{ data.remark || '-' }}
					</view>
				</view>
			</view>
		</view>
		<view class="bottom_btns">
			<view class="cont">
				<view class="">
					<view class="btns btns1" v-if="data.status == 1" @click="payOrder()">立即支付</view>
					<view class="btns btns1" v-if="data.status > 2 && data.status != 5" @click="$pageTo('/pages/index/refundLogistics?id=' + id)">查看物流</view>
				</view>
				<view class="u-flex">
					<!-- <view class="btns">联系客服</view> -->
					<view class="r">
						<contact-button tnt-inst-id="iA3_QVo5" scene="SCE01262333" size="24" color="#333"
							icon="/static/image/kf.png" />
					</view>
					<view class="btns" v-if="data.status == 1 " @click.stop="closeOrder()">关闭订单</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			ss2: ['', '待支付', '待发货', '待收货', '已收货', '已关闭'],
			http: this.$imgUrl,
			kd: '',
			name: '',
			alplay: '',
			orders: '',
			notes: '',
			content: ``,
			id: '',
			data: {
				order_no: ''
			},
			list: [],
			receive: {
				address: '',
				mobilePhone: '',
				fullname: ''
			}
		};
	},

	onLoad(o) {
		my.setNavigationBar({
			frontColor: '#000',
			backgroundColor: '#fff'
		});
		if (!uni.getStorageSync('token')) {
			uni.switchTab({
				url: '/pages/index/index'
			});
			return;
		}
		this.id = o.id;
		this.getData();
	},
	methods: {
		getData() {
			this.$http
				.post('/api/sell_order/detail', {
					id: this.id
				})
				.then((res) => {
					if (res.code == 1) {
						this.data = res.data;
						this.list = res.data.products;
						this.receive = res.data.address;
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						});
					}
				})
				.catch((err) => {
					console.log('错误信息：', err);
				});
		},
		// 支付订单
		payOrder() {
			this.$http.post('/api/sell_order/pay ', { id: this.id }).then((res) => {
				if (res.code == 1) {
					// 调用支付宝支付
					my.tradePay({
						tradeNO: res.data.data.alipay_trade_create_response.trade_no, // 支付宝交易号
						success: (res) => {
							if (res.resultCode === '9000') {
								// 支付成功
								uni.showToast({
									title: '支付成功',
									icon: 'success'
								});
								this.getData();
							} else {
								// 支付失败
								uni.showToast({
									title: '支付失败，请重试',
									icon: 'none'
								});
							}
						},
						fail: (err) => {
							console.log('支付失败', err);
							uni.showToast({
								title: '支付失败',
								icon: 'none'
							});
						}
					});
				}
			});
		},
		closeOrder() {
			uni.showModal({
				title: '温馨提示',
				content: '你要关闭订单吗?',
				success: (res) => {
					if (res.confirm) {
						this.$http
							.post('/api/sell_order/closeOrder', {
								id: this.id
							})
							.then((res) => {
								if (res.code == 1) {
									uni.showToast({
										title: '关闭成功',
										icon: 'none'
									});
									this.getData();
								} else {
									uni.showToast({
										title: res.msg,
										icon: 'none'
									});
								}
							});
					}
				}
			});
		}
	}
};
</script>

<style lang="less" scoped>
@color: #e31d21;
.btn_zw {
	height: 80rpx;
	padding-bottom: constant(safe-area-inset-bottom);
	padding-bottom: env(safe-area-inset-bottom);
}
.bottom_btns {
	width: 750rpx;
	min-height: 80rpx;
	background: #f7f7f7;
	box-shadow: 0rpx 1px 10rpx 0rpx rgba(0, 0, 0, 0.2);
	position: fixed;
	bottom: 0%;
	padding-bottom: constant(safe-area-inset-bottom);
	padding-bottom: env(safe-area-inset-bottom);
	z-index: 9;
	.cont {
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 28rpx;
		min-height: 80rpx;
		color: #000000;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		padding: 0rpx 20rpx;
		align-items: center;
		.cont_left {
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #aeaeae;
			position: relative;
			.zf_btns {
				width: 60rpx;
				height: 60rpx;
				position: absolute;
				top: 0%;
				opacity: 0;
			}
		}
		.btns {
			width: 160rpx;
			height: 60rpx;
			background: #eeeeee;
			border-radius: 12rpx 12rpx 12rpx 12rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 30rpx;
			color: #787878;
			line-height: 60rpx;
			text-align: center;
			margin-left: 30rpx;
		}
		.btns1 {
			background: #ff8080;
			color: #ffffff;
		}
	}
}
.container {
	padding: 30rpx 30rpx 150rpx;

	.footer {
		position: fixed;
		background-color: #fff;
		left: 0;
		right: 0;
		padding: 20rpx 30rpx;
		z-index: 999;
		bottom: 0;

		.btn {
			width: 100%;
			height: 80rpx;
			text-align: center;
			border-radius: 40rpx;
			line-height: 80rpx;
			font-size: 32rpx;
			font-weight: 600;
			color: #fff;
			background-color: @color;
		}
	}

	.list-order {
		background-color: #fff;
		padding: 20rpx;
		border-radius: 10rpx;

		.item {
			padding: 10rpx 0;

			.l {
				font-size: 28rpx;
				color: #333;
				width: 160rpx;
			}

			.r {
				margin-left: 20rpx;
				flex: 1;
				width: 1rpx;
				font-size: 24rpx;
				color: #666;
				text-align: right;
				line-height: 40rpx;
			}
		}
	}

	.kd {
		background-color: #fff;
		padding: 20rpx;
		border-radius: 10rpx;

		.l {
			flex: 1;
			width: 1rpx;
			margin-right: 20rpx;

			input {
				font-size: 28rpx;
				color: #333;
				height: 60rpx;
				line-height: 60rpx;
			}
		}

		.r {
		}
	}

	.list-express {
		background-color: #fff;
		padding: 20rpx 20rpx 0;
		border-radius: 10rpx;
		flex-wrap: wrap;

		.item {
			margin: 0 15rpx 20rpx 0;
			width: 110rpx;
			height: 80rpx;

			&:nth-child(5n) {
				margin-right: 0;
			}

			image {
				width: 120rpx;
				height: 80rpx;
			}
		}
	}

	.body {
		background-color: #fff;
		padding: 20rpx;
		border-radius: 10rpx;
	}

	.textarea {
		background-color: #fff;
		padding: 20rpx;
		border-radius: 10rpx;

		textarea {
			width: 100%;
			height: 100rpx;
			font-size: 28rpx;
			color: #333;
		}
	}

	.list {
		background-color: #fff;
		padding: 20rpx;
		border-radius: 10rpx;

		.item {
			padding: 10rpx 0;

			.l {
				width: 130rpx;
				font-size: 26rpx;
				color: #333;
			}

			.r {
				flex: 1;
				width: 1rpx;
				margin-left: 20rpx;

				input {
					font-size: 28rpx;
					color: #333;
					height: 60rpx;
					line-height: 60rpx;
					width: 100%;
				}
			}
		}
	}

	.list-goods {
		background-color: #fff;
		padding: 20rpx;
		border-radius: 10rpx;

		.item {
			padding: 10rpx 0;
			border-bottom: 2rpx solid #eee;

			.img {
				width: 112rpx;
				height: 180rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.con {
				flex: 1;
				padding: 0 20rpx;
				width: 1rpx;

				.title {
					font-size: 28rpx;
					color: #333;
				}

				.tips {
					text {
						color: #999;
						font-size: 24rpx;
						margin: 10rpx 10rpx 0 0;
					}
				}
			}

			.r {
				text-align: right;

				.price {
					font-size: 24rpx;
					color: #666;
					height: 60rpx;
					line-height: 60rpx;
				}

				.num {
					font-size: 24rpx;
					color: #666;
				}
			}
		}
	}

	.m-title {
		height: 80rpx;
		line-height: 80rpx;
		color: #333;
		font-size: 32rpx;

		text {
			margin-left: 10rpx;
			font-size: 24rpx;
			color: @color;
		}
	}

	.main {
		background-color: #fff;
		padding: 20rpx;
		border-radius: 10rpx;

		.p {
			line-height: 40rpx;
			font-size: 24rpx;
			color: #333;

			text {
				width: 150rpx;
				margin-right: 30rpx;
			}
		}
	}
}
</style>
